<template>
  <div>
  <el-button @click="expandAll">展开所有行</el-button>
  <el-button @click="collapseAll">折叠所有行</el-button>
  <el-table :data="tableData" 
    style="width: 100%;margin-bottom: 20px;" 
    :row-key="getRowKey" 
    :expand-row-keys="expendedRowKeys"
    border 
    default-expand-all
    ref="table"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: 11,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [{
              id: 111,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 112,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }]
          }, {
            id: 12,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        },
        {
          id: 2,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: 21,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [{
              id: 221,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 222,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }]
          }, {
            id: 22,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        },
      ],
      expendedRowKeys: []
    }
  },
  methods: {
    expendAll(){
      this.tableData.forEach(row=>{
        this.$refs.table.toggleRowExpansion(row,true)
      })
    },
    closeAll(){
      this.tableData.forEach(row=>{
        this.$refs.table.toggleRowExpansion(row,false)
      })
    },// 获取行唯一 key
    getRowKey(row) {
      return row.id;
    },
async expandAll() {
      for (let row of this.tableData) {
        await this.expandRowRecursive(row, true);
      }
    },

    // 递归折叠所有行
    async collapseAll() {
      for (let row of this.tableData) {
        await this.expandRowRecursive(row, false);
      }
    },

    // 递归展开/折叠某一行及其所有子行
    async expandRowRecursive(row, expand) {
      // 先展开/折叠当前行
      this.$refs.table.toggleRowExpansion(row, expand);

      // 如果是展开操作，且有子项，则等待 DOM 更新后再处理子项
      if (expand && row.children && row.children.length) {
        await this.$nextTick(); // 等待子表格渲染
        for (let child of row.children) {
          await this.expandRowRecursive(child, expand);
        }
      }
    }
  }
  
}
</script> 